<template>
   <div class="qtlist">
       <h4>运输员列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0;display:flex; justify-content: space-between;">
                
                 <el-button type="primary"  size="small" 
                   style="margin-bottom:14px;" @click="addTrans()">增加运输员</el-button>
                    <div>
                        <!-- <div class="demo-input-suffix" style="margin-right:80px;display:inline-block;">
                            涉及城市：
                            <el-select v-model="value" placeholder="请选择省" style="margin-right:20px;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="value" placeholder="请选择市">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select> 
                        </div> -->
                        <div class="demo-input-suffix" style="margin-right:80px;display:inline-block;">
                            真实姓名：
                            <el-input clearable
                                placeholder="请输入真实姓名"
                                v-model="realName" class="filter-input"
                                @keyup.enter.native="search_trans()">
                            </el-input>
                        </div>
                       <div class="demo-input-suffix" style="margin-right:80px;display:inline-block;">
                                联系方式：
                                <el-input clearable 
                                    placeholder="请输入联系方式"
                                    v-model="tel" class="filter-input"
                                    @keyup.enter.native="search_trans()">
                                </el-input>
                        </div>
                         <el-button type="primary" @click="search_trans()">搜索</el-button>
                        </div>
                      
        
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px ">
            <div style="overflow:hidden">
              <div style="float:left;"></div>
              <!-- <el-button type="danger"  style="float:right;margin-bottom:20px;">导出(勾选)</el-button> -->
           </div>
            <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                 <el-table-column prop="realName" label="运输员姓名" width="140" align="center">
                 </el-table-column>
                 <el-table-column prop="tel" label="司机联系方式" width="180" align="center"></el-table-column>
                 <!-- <el-table-column prop="tel" label="涉及城市" width="180" align="center"></el-table-column> -->
                 <el-table-column prop="status" label="状态" align="center" width="140" :formatter="formatter">
                 </el-table-column>
                 <el-table-column label="操作"  align="center">
                 <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="lookDetail(scope.row.id)">详情</el-button>
                    <el-button size="mini" type="primary" @click="lookDetail(scope.row.id)">修改</el-button>
                    <el-button size="mini" type="warning" @click="handleEdit(scope.row)">{{scope.row.isDeleted == 1? '启用':'禁用'}}</el-button>
                    <el-button size="mini" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
                 </template>
                 </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination  background  layout="prev, pager, next" :total="total" style="text-align:left;"
                                @current-change="getPageNum">
                </el-pagination>
           </div>
      </div>
      <!-- 新增运输员弹框 -->
      <el-dialog  title="新增运输员信息"  :visible.sync="dialogFormVisible" width="40%" top="18vh">
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item prop="userName" label="运输员姓名" :label-width="formLabelWidth">
                       <el-input v-model="form.userName" auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
               <el-form-item prop="tel" label="运输员联系方式" :label-width="formLabelWidth">
                       <el-input v-model="form.tel" maxlength="11" auto-complete="on" style="width:300px;"></el-input>
                </el-form-item>
                <!-- <el-form-item prop="tel" label="涉及城市" :label-width="formLabelWidth">
                       <el-select v-model="value" placeholder="请选择省" style="margin-right:20px;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                        </el-select>
                        <el-select v-model="value" placeholder="请选择市">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelSave('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="saveEdit('ruleForm')">保存</el-button>
            </div>
    </el-dialog>
  </div>  
</template>

<script>
import { addTransUser,TransList,delTrans,status_trans } from '@/request/api'
export default {
    data(){
        var checkBlank = (rule, value, callback) => {
            if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
                callback(new Error('请不要输入空格'));
            }else {
                callback()
            } 
        };
        return {
            loading:true,
            data: [],
            options: [{
                    value: '选项1',
                    label: '黄金糕'
                    }, {
                    value: '选项2',
                    label: '双皮奶'
                    }, {
                    value: '选项3',
                    label: '蚵仔煎'
                    }, {
                    value: '选项4',
                    label: '龙须面'
                    }, {
                    value: '选项5',
                    label: '北京烤鸭'
            }],
            value: '',
            realName:'',
            tel:'',
            dialogFormVisible:false,
            formLabelWidth:'160px',
            form:{
                userName:'',
                tel:''
            },
            rules:{
                userName: [
                        { required: true, message: '运输员不能为空', trigger: 'blur' },
                        { validator: checkBlank, trigger: 'blur' }
                ],
                tel: [
                        {  required: true, message: '联系方式不能为空', trigger: 'change' },
                        { pattern: /^(0|86|17951)?(1[3-9][0-9])[0-9]{8}$/, message: '手机号格式不对', trigger: 'blur'}
                    
                ]
            },
            total:0,
            pageNum:1,
            pageSize:10
        }
    },
    created(){
         this.getTransList();
    },
    methods:{
      search_trans() {
        //    搜索运输员
          this.getTransList();
      },
      formatter(row, column){
         return  row.isDeleted == 1 ? '不可用' :'可用'
      },
      //   详情
      lookDetail(id){
          this.$router.push({
              path:`/translist/trans_detail/${id}`
          })
      },
    //    新增运输员 
      addTrans(){
           this.dialogFormVisible = true;
      },
      saveEdit(formName){
          this.$refs[formName].validate((valid)=> {
              console.log(1,valid);
              if(valid) {
                  addTransUser({
                      realName:this.form.userName,
                      tel:this.form.tel
                  }).then(res=> {
                     if(res.code == 1) {
                            this.dialogFormVisible = false;
                            this.$refs[formName].resetFields();
                            this.$message.success('新增运输员成功');
                            this.getTransList();
                     }else if(res.code == 2) {
                         this.$message.warning('手机号已存在，请重新输入');
                     }
                  })
              }
          })
      },
      getTransList(){
           TransList({
               realName:this.realName,
               tel:this.tel,
               pageNum:this.pageNum,
               pageSize:this.pageSize
           }).then(res=> {
               this.loading = false;
               this.total = res.total;
               this.data = res.rows;
           })
      },
      cancelSave(formName){
           this.dialogFormVisible = false;
           this.$refs[formName].resetFields();    
      },
      getPageNum(val) {
          this.pageNum = val;
          this.getTransList();
      },
    //   删除 
      handleDel(id) {
         this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             delTrans({
                 id:id
             }).then(res => {
                 console.log(res);
                 if(res.code ==1) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    this.getTransList()
                 }
             })
         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消删除'
              });  
         }) 
      },
      //   禁用 启用 
      handleEdit(row){
        let info = row.isDeleted == 1 ? '确认启用？' :'确认禁用？'
        let msg = row.isDeleted == 1? '启用成功':'禁用成功'
        let cancelMsg = row.isDeleted == 1? '已取消启用':'已取消禁用'
        this.$confirm(info, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             status_trans({
                 id:row.id
             }).then(res => {
                 console.log(res);
                 if(res.code == 1) {
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                   this.getTransList()
                 }
             })
             
         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: cancelMsg
              });  
         }) 
      }
    }
 }
</script>
<style  scoped>
.qtlist {
        width:100%;
        height: 100%;
}
.qtlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
 
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>